<template>
  <div class="table2 flex-col h-full overflow-hidden m-m">
    <div class="pb-14">
      <MsSectioner :values="menuList" @click="tabChange" :height="30" />
    </div>
    <div class="flex-1 w-full" v-if="showCom">
      <section class="box-full overflow-hidden box-border">
        <transition name="fade-slide" mode="out-in" appear>
          <keep-alive>
            <component ref="childrenRef" :is="menuList[selectedKey].value" :allChannel="allChannel"></component>
          </keep-alive>
        </transition>
      </section>
    </div>
  </div>
</template>
<script setup>
import User from './user/User.vue'
import Order from './order/Order.vue'
import { getSelfAllChannel } from '@/apis'
import { useUserStore } from '@/store'
const userStore = useUserStore()

defineOptions({ name: 'dataStatistics' })

const selectedKey = ref(0)

const allChannel = ref([])
const showCom = ref(false)
const getSelfAllChannelFun = () => {
  getSelfAllChannel()
    .then((res) => {
      allChannel.value = res.data
    })
    .finally(() => {
      showCom.value = true
    })
}
getSelfAllChannelFun()
const menuList = [
  { name: `${userStore.userInfo.rewardChannelStr}统计`, value: Order },
  { name: '用户统计', value: User }
]
const tabChange = (val) => {
  selectedKey.value = val.index
}
</script>
<style lang="scss" scoped>
.color-bg-1 {
  background: var(--color-bg-1);
}
.center-tab {
  border-left: 1px solid rgb(var(--primary-6));
  border-right: 1px solid rgb(var(--primary-6));
}
.screen-box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  :deep(.arco-select-view, .arco-picker) {
    border: none;
  }
  :deep(.arco-divider-vertical) {
    margin: 0;
  }
}
:deep(.arco-card-header) {
  border: none;
}
</style>
